<template>
  <div class="wrap">
    <div class="content">
      <div class="tab-header">
        <div class="tab-item acitve">全部</div>
        <div class="tab-item">全部</div>
        <div class="tab-item">全部</div>
        <div class="tab-item">全部</div>
        <div class="tab-item">全部</div>
        <div class="tab-item">客户端测试</div>
      </div>
      <ul class="list">
        <li class="list-item">
          <img class="touxiang" src="https://avatars.githubusercontent.com/u/227713?v=4&s=120" alt="">
        </li>
        <li class="list-item">1</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.wrap {
  height: 100%;
  overflow: hidden;
}
.content {
  background: gray;
  height: 100%;
  margin: 100px 300px 100px 300px;
}
.tab-header {
  padding: 10px;
  background-color: #f6f6f6;
  border-radius: 13px 13px 0 0;
  overflow: hidden;
}
.tab-item {
  float: left;
  margin: 0 10px;
  cursor: pointer;
  color: #80bd01;
  font-size: 14px;
  padding: 3px;
}
.acitve {
  color: #fff;
  background: #80bd01;
  border-radius: 3px;
}
.list {
  background: #fff;
}
.list-item {
  height: 50px;
  border-bottom: 1px solid #f0f0f0;
}
.list-item .touxiang {
  width: 30px;
  height: 30px;
  margin: 10px;
}
</style>
